<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #box {
        width: 6.9rem;
        height: 3rem;
        margin: 0.3rem;
        background-color: skyblue;
        border: 1px solid black;
        box-sizing: border-box;
      }

      /* @media screen and (-webkit-min-device-pixel-ratio: 2) {
        #box {
          border: 0.5px solid black;
        }
      }
      @media screen and (-webkit-min-device-pixel-ratio: 3) {
        #box {
          border: 0.3333px solid black;
        }
      } */
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      // 1. 计算根标签的字体大小
      //   设备独立像素宽度 * 100 / 375 ==> 得到当前设置根标签的字体大小
      const fontSize = (document.documentElement.clientWidth * 100) / 750
      //   // 给根标签设置字体大小
      document.documentElement.style.fontSize = fontSize + 'px'

      // 一次性解决1px边框看起来比较粗的问题
      // 1. 获取viewport
      const viewport = document.querySelector('meta[name=viewport]')
      // console.log(viewport)
      // 2. 计算当前设备的布局视口应该变大多少倍
      const scale = 1 / window.devicePixelRatio

      // 3. 给initial-scale赋值,让布局视口等比变大
      viewport.setAttribute(
        'content',
        'width=device-width, initial-scale=' + scale
      )

      // 注意: 当布局视口等比变大之后,我们的盒子看起来就变小了.所以我们要让根标签的字体大小也等比变大,这样最终计算出来的盒子的px值也就等比变大了.最后还是设计稿的效果
      document.documentElement.style.fontSize =
        fontSize * window.devicePixelRatio + 'px'
    </script>
  </body>
</html>
